<template>
  <div class="project">
    <cheader :pageIndex="1"></cheader>
    <div class="jdBg">
      <img src="@/common/img/bg.png" alt="" class="bg">
      <img src="./banner.png" alt="" class="title">
    </div>
    <div class="world">
      <div class="c-titleWrap">
        <div class="c-title">
          <div class="t">
            <img src="@/common/img/ball2.png" alt="">
            <h3>“桃李不言，大爱交大”</h3>
            <span></span>
          </div>
          <!-- <div class="b">爱心捐赠系列</div> -->
        </div>
      </div>
      <div class="c-slogan">
        <p>面对疫情，来自欧洲、北美洲、大洋洲、亚洲等多个国家以及全国超过30个省份的交大人自发展开爱心接力，</p>
        <p>通过善款物资、技术支持等方式驰援抗疫，凝聚成一股强大合力，共克时艰！</p>
      </div>
      <div class="content">
        <div class="map">
          <img src="./world.png" alt="" class="bg">
          <div class="chinaWrap">
            <img src="./light.png" alt="" class="light">
            <img src="./china.png" alt="" class="chinaImg">
          </div>
          <img src="./line.png" alt="" class="line">
          <!-- <div class="fake" @click="goChinaMap"></div> -->
          <ul class="area">
            <!-- <li class="rb">日本<font-awesome-icon icon="caret-down" class="icon"/></li>
            <li class="xjp">新加坡<font-awesome-icon icon="caret-down" class="icon"/></li>
            <li class="yn">印度尼西亚<font-awesome-icon icon="caret-left" class="icon"/></li>
            <li class="xxl">新西兰<font-awesome-icon icon="caret-right" class="icon"/></li>
            <li class="dg">德国<font-awesome-icon icon="caret-down" class="icon"/></li>
            <li class="wgh">温哥华<font-awesome-icon icon="caret-down" class="icon"/></li> -->
            <li class="rb-h">
              <img src="./heart.png" alt="">
            </li>
            <li class="xjp-h">
              <img src="./heart.png" alt="">
            </li>
            <li class="yn-h">
              <img src="./heart.png" alt="">
            </li>
            <li class="xxl-h">
              <img src="./heart.png" alt="">
            </li>
            <li class="dg-h">
              <img src="./heart.png" alt="">
            </li>
            <li class="wgh-h">
              <img src="./heart.png" alt="">
            </li>
          </ul>
        </div>
        <button @click="goChinaMap">点击中国地区了解详情</button>
      </div>
    </div>
    <div class="china">
      <div class="c-titleWrap">
        <div class="c-title">
          <div class="t">
            <img src="@/common/img/ball2.png" alt="">
            <h3>“战疫一线，唱响基层”</h3>
            <span></span>
          </div>
          <!-- <div class="b">基层战疫系列</div> -->
        </div>
      </div>
      <div class="c-slogan">
        <p>交大选调生校友们深入到大江南北的基层一线,扎根祖国和人民最需要的地方，</p>
        <p>用实际行动捍卫乡镇、社区安宁，心手相牵，勠力战“疫”。</p>
      </div>
      <div class="content">
        <div class="map">
          <div class="s1">
            <swiper :options="swiper1Option" ref="s1Swiper">
              <!-- slides -->
              <swiper-slide v-for="item in people" :key="item.id" :data-did='item.id' :style="{backgroundImage: 'url('+ item.cover +')'}">
                <h1>{{item.data}}</h1>
              </swiper-slide>
            </swiper>
          </div>
          <img src="./chinaBg.png" alt="" class="bg">
        </div>
        <button @click="goToList(1, 1, 22)">点击了解详情</button>
      </div>
    </div>
    <div class="heart">
      <div class="c-titleWrap">
        <div class="c-title">
          <div class="t">
            <img src="@/common/img/ball2.png" alt="">
            <h3>“青春战疫，百炼成钢”</h3>
            <span></span>
          </div>
          <!-- <div class="b">学生战疫系列</div> -->
          <!-- <div class="more" @click="goToList(1, 2, 23)">更多</div> -->
        </div>
      </div>
      <div class="c-slogan">
        <p>党旗所指就是团旗所向，面对没有硝烟的战争，交大青年学子责无旁贷，纷纷通过自身行动投身战疫。</p>
        <p>星星之火，守护祖国！</p>
      </div>
      <div class="content">
        <ul v-if="heartArr.length">
          <li :class="['i'+(index+1),index===13||index===14||index===15?'big':'small']" v-for="(item, index) in heartArr" :key="item.id" >
            <img :src="item.cover" alt="" :data-did="heartArr[index].id"  @click="goJump">
            <div class="info">
              <h4>{{heartArr[index].title.length>14?heartArr[index].title.substring(0,14)+'...' : heartArr[index].title}}</h4>
              <div><span :data-did="heartArr[index].id"  @click="goJump">了解详情 》</span></div>
            </div>
          </li>
          <!-- <li class="small i1">
            <img :src="heartArr[0].cover" alt="">
            <div class="info">
              <h4>{{heartArr[0].description.length>14?heartArr[0].description.substring(0, 14)+'...' : heartArr[0].description}}</h4>
              <div><span :data-did="heartArr[0].id"  @click="goJump">了解详情 》</span></div>
            </div>
          </li>
          <li class="small i2">
            <img :src="heartArr[1].cover" alt="">
            <div class="info">
              <h4>{{heartArr[1].description.length>14?heartArr[1].description.substring(0, 14)+'...' : heartArr[1].description}}</h4>
              <div><span :data-did="heartArr[1].id"  @click="goJump">了解详情 》</span></div>
            </div>
          </li>
          <li class="small i3">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i4">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i5">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i6">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i7">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i8">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i9">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i10">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i11">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i12">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i13">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="big i14">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="big i15">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="big i16">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i17">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i18">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i19">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i20">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i21">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i22">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i23">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i24">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i25">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i26">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i27">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i28">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i29">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li>
          <li class="small i30">
            <img src="http://shsportshistory.oss-cn-hangzhou.aliyuncs.com/sportsvideo/1037416397166088192.jpg?x-oss-process=style/w14" alt="">
            <div class="info">
              <h4>抗击疫情，这些交大上海的年轻人</h4>
              <div><span>了解详情 》</span></div>
            </div>
          </li> -->
        </ul>
      </div>
      <button @click="goToList(1, 2, 23)" v-if="heartArr.length">点击了解详情</button>
    </div>
    <cfooter></cfooter>
  </div>
</template>
<script>
import cheader from '@/components/cheader/cheader'
import cfooter from '@/components/cfooter/cfooter'
import api from '@/common/js/api'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import '@/common/css/swiper.min.css'
export default {
  data () {
    return {
      bg: require('@/common/img/bg.png'),
      star: require('./star.png'),
      heartArr: [],
      swiper1Option: {
        // effect: 'fade',
        // direction: 'vertical',
        loop: true,
        autoplay: true
      },
      people: [
        {
          data: '吉林：王琪、曲姝颖、黄国任、毕春雨'
        },
        {
          data: '浙江：朱哲敏、马骋远、屠凌嘉、方勇、沈芳'
        },
        {
          data: '安徽：邢红升'
        },
        {
          data: '山东：裴庆焱'
        },
        {
          data: '广西：李琼洁、韦俊腾、王冰、温洲'
        },
        {
          data: '重庆：谢林庆'
        },
        {
          data: '福建：周勇'
        },
        {
          data: '贵州：马明鸿、龙江南'
        },
        {
          data: '湖南：张懿、肖霞、赵子任、曾巍'
        },
        {
          data: '宁夏：张琪媛、马俊霞、虎慧泽'
        },
        {
          data: '江西：刘品旺、杜荣强、王忍青'
        },
        {
          data: '上海：杨晶'
        },
        {
          data: '四川：赵宁、陈思锦、甘义良'
        },
        {
          data: '云南：马睿、朱文涛'
        },
        {
          data: '陕西：李秋炎、张培、刘哲'
        },
        {
          data: '湖北：陈颀'
        },
        {
          data: '江苏：米阳、李腾飞、曾瑜、田艺、许慧文'
        }
      ]
    }
  },
  created () {
    api.getHeart().then(res => {
      if (res.data.result === '0') {
        this.heartArr = res.data.data.students
      }
    })
  },
  methods: {
    goChinaMap () {
      this.$router.push({
        name: 'chinaMap'
      })
    },
    // 去专题列表页 (专题几，第几个模块, 后端参数type, 后端参数id)
    goToList (project, blc, postType, postId) {
      this.$router.push({
        name: 'projectList',
        query: {
          project: project,
          blc: blc,
          postType: postType,
          postId: postId
        }
      })
    },
    goToDetail (project, blc, did) {
      this.$router.push({
        name: 'projectDetail',
        query: {
          project: project,
          blc: blc,
          did: did
        }
      })
    },
    goJump (e) {
      let did = e.target.dataset.did
      this.goToDetail(1, 2, did)
    }
  },
  components: {
    cheader,
    cfooter,
    swiper,
    swiperSlide
  }
}
</script>
<style lang="scss" scoped>
  $projectYellow: #d2964f;
  .project {
    background: no-repeat top center $projectYellow;
    .jdBg {
      width: 100%;
      height: 290px;
      // background: green;
      position: relative;
      overflow: hidden;
      .bg {
        width: 375px;
        height: 229px;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -187px;
      }
      .title {
        width: 375px;
        height: 290px;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -187px;
      }
    }
    .c-titleWrap {
      position: relative;
      text-align: center;
      .t {
        height: 28px;
        position: relative;
        display: inline-block;
        // background-color: green;
        font-size: 0;
        margin-bottom: 20px;
        img {
          width: 29px;
          height: 29px;
          position: absolute;
          left: 0;
          top: 0;
        }
        h3 {
          font-size: 17px;
          color: #fff;
          font-weight: bold;
          position: relative;
          margin-top: 10px;
        }
        span {
          display: inline-block;
          width: 5px;
          height: 5px;
          background-color: #ffe75f;
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
      .b {
        font-size: 24px;
        color: #fff;
      }
      .more {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 70px;
        height: 24px;
        font-size: 14px;
        color: #fff;
        line-height: 24px;
        text-align: center;
        border-radius: 50px;
        background-color: #eead67;
        cursor: pointer;
      }
    }
    .c-slogan {
      width: 325px;
      margin: 0 auto;
      // height: 84px;
      background-color: #d8a76e;
      color: rgba($color: #fff, $alpha: 0.6);
      box-sizing: border-box;
      border: 1px solid #ae712a;
      border-radius: 10px;
      padding: 14px 30px;
      cursor: default;
      p {
        line-height: 20px;
        font-size: 14px;
        text-align: center;
      }
    }
    .world {
      width: 100%;
      margin: 0 auto 56px;
      .content {
        margin-bottom: 20px;
        margin-top: 20px;
        .map {
          width: 325px;
          height: 206px;
          margin: 0 auto;
          position: relative;
          .bg {
            width: 325px;
            height: 206px;
          }
          img {
            display: block;
            position: absolute;
          }
          .chinaWrap {
            width: 73px;
            height: 55px;
            position: absolute;
            top: 63px;
            left: 213px;
            // background-color: #000;
            .light {
              width: 73px;
              height: 55px;
              top: 0;
              left: 0;
              animation: flash 2s infinite;
            }
            .chinaImg {
              width: 59px;
              height: 40px;
              top: 8px;
              left: 9px;
            }
          }
          .fake {
            width: 202px;
            height: 153px;
            position: absolute;
            top: 174px;
            left: 599px;
            z-index: 3;
            cursor: pointer;
          }
          .area {
            // background-color: rgba($color: #000000, $alpha: .5);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            li {
              width: 6px;
              height: 6px;
              img {
                width: 6px;
                height: 6px;
              }
            }
            .rb-h {
              position: absolute;
              left: 283px;
              top: 87px;
              animation: breathe 1.6s infinite 0.5s;
            }
            .xjp-h {
              position: absolute;
              left: 246px;
              top: 125px;
              animation: breathe 1.6s infinite 0.6s;
            }
            .yn-h {
              position: absolute;
              left: 259px;
              top: 128px;
              animation: breathe 1.6s infinite 0.4s;
            }
            .xxl-h {
              position: absolute;
              left: 309px;
              top: 165px;
              animation: breathe 1.6s infinite 0.3s;
            }
            .dg-h {
              position: absolute;
              left: 158px;
              top: 70px;
              animation: breathe 1.6s infinite 0.7s;
            }
            .wgh-h {
              position: absolute;
              left: 26px;
              top: 68px;
              animation: breathe 1.6s infinite 0.8s;
            }
          }
          .line {
            width: 280px;
            height: 100px;
            top: 67px;
            left: 33px;
          }
        }
        button {
          height: 22px;
          line-height: 22px;
          width: 325px;
          background-color: #eead67;
          border: 0 none;
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
          font-size: 11px;
          color: rgba($color: #fff, $alpha: 0.6);
          cursor: pointer;
          margin: 0 auto;
          display: block;
        }
      }
    }
    .china {
      width: 100%;
      margin: 0 auto 56px;
      min-height: 463px;
      .content {
        margin: 20px 0 20px;
        .map {
          width: 325px;
          height: 263px;
          position: relative;
          margin: 0 auto;
          background-color: #eead67;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
          .s1 {
            padding-top: 10px;
            .swiper-container {
              width: 305px;
              height: 22px;
              line-height: 22px;
              border-radius: 5px;
              background-color: rgba($color: #000000, $alpha: .5);
              .swiper-slide {
                text-align: center;
                font-size: 12px;
                color: #fff;
              }
            }
            }
          .bg {
            width: 325px;
            height: 263px;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
          }
          ul {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
            li {
              width: 20px;
              height: 19px;
              background: center no-repeat;
              position: absolute;
              cursor: pointer;
              &:hover {
                .people {
                  display: block !important;
                  animation: jump .8s;
                }
              }
              .people {
                display: none;
                text-align: center;
                background: rgba($color: #000000, $alpha: 0.6);
                position: absolute;
                border-radius: 10px;
                font-size: 18px;
                color: #fff;
                z-index: 9;
                .icon {
                  position: absolute;
                  font-size: 18px;
                  color: rgba($color: #000000, $alpha: 0.6);
                  left: 50%;
                  bottom: -11px;
                }
              }
              &.jl {
                top: 158px;
                left: 686px;
                .people {
                  width: 304px;
                  height: 36px;
                  line-height: 36px;
                  left: 50%;
                  margin-left: -152px;
                  top: -48px;
                  .icon {
                    margin-left: -5px;
                  }
                }
              }
              &.nx {
                top: 302px;
                left: 463px;
                .people {
                  width: 250px;
                  height: 36px;
                  line-height: 36px;
                  left: 50%;
                  margin-left: -125px;
                  top: -48px;
                  .icon {
                    margin-left: -5px;
                  }
                }
              }
              &.zj {
                top: 429px;
                left: 655px;
                .people {
                  width: 348px;
                  height: 36px;
                  line-height: 36px;
                  left: 50%;
                  margin-left: -174px;
                  top: -48px;
                  .icon {
                    margin-left: -5px;
                  }
                }
              }
              &.sd {
                top: 314px;
                left: 612px;
                .people {
                  width: 112px;
                  height: 36px;
                  line-height: 36px;
                  left: 50%;
                  margin-left: -56px;
                  top: -48px;
                  .icon {
                    margin-left: -5px;
                  }
                }
              }
              &.js {
                top: 357px;
                left: 645px;
                .people {
                  width: 320px;
                  height: 36px;
                  line-height: 36px;
                  left: 50%;
                  margin-left: -160px;
                  top: -48px;
                  .icon {
                    margin-left: -5px;
                  }
                }
              }
              &.sh {
                top: 378px;
                left: 667px;
                .people {
                  width: 100px;
                  height: 36px;
                  line-height: 36px;
                  left: 50%;
                  margin-left: -50px;
                  top: -48px;
                  .icon {
                    margin-left: -5px;
                  }
                }
              }
              &.ah {
                top: 358px;
                left: 609px;
                .people {
                  width: 112px;
                  height: 36px;
                  line-height: 36px;
                  left: 50%;
                  margin-left: -56px;
                  top: -48px;
                  .icon {
                    margin-left: -5px;
                  }
                }
              }
              &.jx {
                top: 422px;
                left: 602px;
                .people {
                  width: 250px;
                  height: 36px;
                  line-height: 36px;
                  left: 50%;
                  margin-left: -125px;
                  top: -48px;
                  .icon {
                    margin-left: -5px;
                  }
                }
              }
              &.fj {
                top: 481px;
                left: 621px;
                .people {
                  width: 100px;
                  height: 36px;
                  line-height: 36px;
                  left: 50%;
                  margin-left: -50px;
                  top: -48px;
                  .icon {
                    margin-left: -5px;
                  }
                }
              }
              &.sx {
                top: 349px;
                left: 482px;
                .people {
                  width: 220px;
                  height: 36px;
                  line-height: 36px;
                  left: 50%;
                  margin-left: -110px;
                  top: -48px;
                  .icon {
                    margin-left: -5px;
                  }
                }
              }
              &.hb {
                top: 387px;
                left: 523px;
                .people {
                  width: 80px;
                  height: 36px;
                  line-height: 36px;
                  left: 50%;
                  margin-left: -40px;
                  top: -48px;
                  .icon {
                    margin-left: -5px;
                  }
                }
              }
              &.hn {
                top: 458px;
                left: 549px;
                .people {
                  width: 300px;
                  height: 36px;
                  line-height: 36px;
                  left: 50%;
                  margin-left: -150px;
                  top: -48px;
                  .icon {
                    margin-left: -5px;
                  }
                }
              }
              &.cq {
                top: 402px;
                left: 483px;
                .people {
                  width: 112px;
                  height: 36px;
                  line-height: 36px;
                  left: 50%;
                  margin-left: -56px;
                  top: -48px;
                  .icon {
                    margin-left: -5px;
                  }
                }
              }
              &.gz {
                top: 471px;
                left: 450px;
                .people {
                  width: 176px;
                  height: 36px;
                  line-height: 36px;
                  left: 50%;
                  margin-left: -88px;
                  top: -48px;
                  .icon {
                    margin-left: -5px;
                  }
                }
              }
              &.gx {
                top: 490px;
                left: 510px;
                .people {
                  width: 304px;
                  height: 36px;
                  line-height: 36px;
                  left: 50%;
                  margin-left: -152px;
                  top: -48px;
                  .icon {
                    margin-left: -5px;
                  }
                }
              }
              &.sc {
                top: 388px;
                left: 386px;
                .people {
                  width: 250px;
                  height: 36px;
                  line-height: 36px;
                  left: 50%;
                  margin-left: -125px;
                  top: -48px;
                  .icon {
                    margin-left: -5px;
                  }
                }
              }
              &.yn {
                top: 472px;
                left: 367px;
                .people {
                  width: 160px;
                  height: 36px;
                  line-height: 36px;
                  left: 50%;
                  margin-left: -80px;
                  top: -48px;
                  .icon {
                    margin-left: -5px;
                  }
                }
              }
            }
          }
        }
        button {
          display: block;
          height: 22px;
          line-height: 22px;
          width: 325px;
          margin: 0 auto;
          background-color: #eead67;
          border: 0 none;
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
          font-size: 11px;
          color: rgba($color: #fff, $alpha: 0.6);
          cursor: pointer;
        }
      }
    }
    .heart {
      width: 100%;
      margin: 0 auto 23px;
      min-height: 545px;
      .c-titleWrap {
        margin-bottom: 20px;
      }
      .content {
        ul {
          position: relative;
          height: 288px;
          width: 325px;
          display: block;
          margin: 20px auto 26px;
          li {
            display: inline-block;
            position: absolute;
            z-index: 1;
            transition: border .3s;
            box-sizing: border-box;
            &.i1 {
              left: 41px;
              top: 0;
            }
            &.i2 {
              left: 82px;
              top: 0;
            }
            &.i3 {
              left: 205px;
              top: 0;
            }
            &.i4 {
              left: 246px;
              top: 0;
            }
            &.i5 {
              left: 0px;
              top: 41px;
            }
            &.i6 {
              left: 41px;
              top: 41px;
            }
            &.i7 {
              left: 82px;
              top: 41px;
            }
            &.i8 {
              left: 123px;
              top: 41px;
            }
            &.i9 {
              left: 164px;
              top: 41px;
            }
            &.i10 {
              left: 205px;
              top: 41px;
            }
            &.i11 {
              left: 246px;
              top: 41px;
            }
            &.i12 {
              left:287px;
              top: 41px;
            }
            &.i13 {
              top: 82px;
              left: 0px;
            }
            &.i14 {
              top: 82px;
              left: 41px;
            }
            &.i15 {
              top: 82px;
              left: 123px;
            }
            &.i16 {
              top: 82px;
              left: 205px;
            }
            &.i17 {
              top: 82px;
              left: 287px;
            }
            &.i18 {
              top: 123px;
              left:0px;
            }
            &.i19 {
              top: 123px;
              left: 287px;
            }
            &.i20 {
              top: 164px;
              left: 41px;
            }
            &.i21 {
              top: 164px;
              left: 82px;
            }
            &.i22 {
              top: 164px;
              left: 123px;
            }
            &.i23 {
              top: 164px;
              left: 164px;
            }
            &.i24 {
              top: 164px;
              left: 205px;
            }
            &.i25 {
              top: 164px;
              left: 246px;
            }
            &.i26 {
              top: 205px;
              left: 82px;
            }
            &.i27 {
              top: 205px;
              left: 123px;
            }
            &.i28 {
              top: 205px;
              left: 164px;
            }
            &.i29 {
              top: 205px;
              left: 205px;
            }
            &.i30 {
              top: 246px;
              left: 144px;
            }
            &.small {
              overflow: hidden;
              width: 37px;
              height: 37px;
              font-size: 0;
              transition: all .3s;
              transition-timing-function: ease;
              border-radius: 4px;
              // &:hover {
              //   border: 2px solid #fff;
              //   z-index: 2;
              //   width: 260px;
              // }
              img {
                width: 37px;
                height: 37px;
                display: inline-block;
                vertical-align: top;
              }
              .info {
                overflow: hidden;
                background-color: #e1a763;
                width: 182px;
                height: 80px;
                position: absolute;
                top: 0px;
                left: 76px;
                z-index: 1;
                color: #fff;
                box-sizing:  border-box;
                padding: 15px 18px;
                box-shadow: 0px 0px 20px #000;
                h4 {
                  font-size: 14px;
                  font-weight: bold;
                  line-height: 20px;
                  height: 40px;
                }
                div {
                  text-align: right;
                  font-size: 12px;
                  span {
                    cursor: pointer;
                  }
                }
              }
            }
            &.big {
              overflow: hidden;
              width: 78px;
              height: 78px;
              font-size: 0;
              transition: all .3s;
              transition-timing-function: ease;
              // border: 2px solid transparent;
              border-radius: 2px;
              // &:hover {
              //   border: 2px solid #fff;
              //   z-index: 2;
              //   width: 308px;
              // }
              img {
                width: 78px;
                height: 78px;
                display: inline-block;
                vertical-align: top;
              }
              .info {
                overflow: hidden;
                background-color: #e1a763;
                width: 138px;
                height: 166px;
                position: absolute;
                top: 0px;
                left: 166px;
                z-index: 1;
                color: #fff;
                box-sizing:  border-box;
                padding: 15px 18px;
                box-shadow: 0px 0px 20px #000;
                h4 {
                  font-size: 14px;
                  font-weight: bold;
                  line-height: 20px;
                  height: 125px;
                }
                div {
                  text-align: right;
                  font-size: 12px;
                  span {
                    cursor: pointer;
                  }
                }
              }
            }
          }
        }
      }
      button {
        width: 325px;
        height: 33px;
        display: block;
        margin: 0 auto;
        line-height: 33px;
        box-sizing: border-box;
        border: 1px solid #fff;
        background-color: #d8a76e;
        border-radius: 5px;
        color: #fff;
      }
    }
  }
  @keyframes flash {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes breathe {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.8);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes jump {
    from,
    20%,
    53%,
    80%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
      -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -30px, 0);
      transform: translate3d(0, -30px, 0);
    }

    70% {
      -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -15px, 0);
      transform: translate3d(0, -15px, 0);
    }

    90% {
      -webkit-transform: translate3d(0, -4px, 0);
      transform: translate3d(0, -4px, 0);
    }
  }
</style>
